<template>
  <div class="api-test">
    <div class="container">
      <h1>API 接口测试页面</h1>
      
      <div class="test-section">
        <h2>系统统计数据测试</h2>
        <button @click="testSystemStats" :disabled="loading.stats">
          {{ loading.stats ? '测试中...' : '测试系统统计接口' }}
        </button>
        
        <div v-if="results.stats" class="result-box success">
          <h3>✅ 系统统计数据获取成功</h3>
          <pre>{{ JSON.stringify(results.stats, null, 2) }}</pre>
        </div>
        
        <div v-if="errors.stats" class="result-box error">
          <h3>❌ 系统统计数据获取失败</h3>
          <p>{{ errors.stats }}</p>
          <p class="note">注意：这是正常现象，因为后端接口尚未实现。系统会自动使用模拟数据。</p>
        </div>
      </div>

      <div class="test-section">
        <h2>热图数据测试</h2>
        <div class="controls">
          <select v-model="testArea">
            <option value="all">全部区域</option>
            <option value="A">区域A</option>
            <option value="B">区域B</option>
            <option value="C">区域C</option>
          </select>
          <button @click="testHeatmapData" :disabled="loading.heatmap">
            {{ loading.heatmap ? '测试中...' : '测试热图数据接口' }}
          </button>
        </div>
        
        <div v-if="results.heatmap" class="result-box success">
          <h3>✅ 热图数据获取成功</h3>
          <p>数据点总数: {{ results.heatmap.heatmap ? results.heatmap.heatmap.flat().length : 0 }}</p>
          <details>
            <summary>查看详细数据</summary>
            <pre>{{ JSON.stringify(results.heatmap, null, 2) }}</pre>
          </details>
        </div>
        
        <div v-if="errors.heatmap" class="result-box error">
          <h3>❌ 热图数据获取失败</h3>
          <p>{{ errors.heatmap }}</p>
        </div>
      </div>

      <div class="test-section">
        <h2>趋势数据测试</h2>
        <div class="controls">
          <select v-model="testTimeRange">
            <option value="today">今日</option>
            <option value="yesterday">昨日</option>
            <option value="week">本周</option>
            <option value="month">本月</option>
          </select>
          <button @click="testTrendData" :disabled="loading.trend">
            {{ loading.trend ? '测试中...' : '测试趋势数据接口' }}
          </button>
        </div>
        
        <div v-if="results.trend" class="result-box success">
          <h3>✅ 趋势数据获取成功</h3>
          <p>数据点数量: {{ results.trend.trend ? results.trend.trend.length : 0 }}</p>
          <details>
            <summary>查看详细数据</summary>
            <pre>{{ JSON.stringify(results.trend, null, 2) }}</pre>
          </details>
        </div>
        
        <div v-if="errors.trend" class="result-box error">
          <h3>❌ 趋势数据获取失败</h3>
          <p>{{ errors.trend }}</p>
        </div>
      </div>

      <div class="test-section">
        <h2>批量测试</h2>
        <button @click="testAllApis" :disabled="isTestingAll">
          {{ isTestingAll ? '测试中...' : '测试所有接口' }}
        </button>
        
        <div v-if="allTestResults.length > 0" class="result-box">
          <h3>批量测试结果</h3>
          <ul>
            <li v-for="result in allTestResults" :key="result.name" 
                :class="{ success: result.success, error: !result.success }">
              {{ result.name }}: {{ result.success ? '✅ 成功' : '❌ 失败' }}
              <span v-if="!result.success" class="error-detail">{{ result.error }}</span>
            </li>
          </ul>
        </div>
      </div>

      <div class="info-section">
        <h2>📋 测试说明</h2>
        <div class="info-box">
          <p><strong>当前状态：</strong>由于后端 API 接口尚未实现，所有接口调用都会失败并自动使用模拟数据。</p>
          <p><strong>这是正常现象！</strong>系统设计了完善的降级机制，确保在没有后端的情况下也能正常显示数据。</p>
          <p><strong>下一步：</strong>根据 API 接口说明文档实现对应的后端接口即可。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import smartTileApi from '../api/smartTileApi.js'

export default {
  name: 'ApiTest',
  data() {
    return {
      loading: {
        stats: false,
        heatmap: false,
        trend: false
      },
      results: {
        stats: null,
        heatmap: null,
        trend: null
      },
      errors: {
        stats: null,
        heatmap: null,
        trend: null
      },
      testArea: 'all',
      testTimeRange: 'today',
      isTestingAll: false,
      allTestResults: []
    }
  },
  methods: {
    async testSystemStats() {
      this.loading.stats = true
      this.errors.stats = null
      this.results.stats = null
      
      try {
        const result = await smartTileApi.getSystemStats()
        this.results.stats = result
      } catch (error) {
        this.errors.stats = error.message
      } finally {
        this.loading.stats = false
      }
    },

    async testHeatmapData() {
      this.loading.heatmap = true
      this.errors.heatmap = null
      this.results.heatmap = null
      
      try {
        const result = await smartTileApi.getHeatmapData({
          area: this.testArea
        })
        this.results.heatmap = result
      } catch (error) {
        this.errors.heatmap = error.message
      } finally {
        this.loading.heatmap = false
      }
    },

    async testTrendData() {
      this.loading.trend = true
      this.errors.trend = null
      this.results.trend = null
      
      try {
        const result = await smartTileApi.getTrendData({
          timeRange: this.testTimeRange
        })
        this.results.trend = result
      } catch (error) {
        this.errors.trend = error.message
      } finally {
        this.loading.trend = false
      }
    },

    async testAllApis() {
      this.isTestingAll = true
      this.allTestResults = []
      
      const tests = [
        { name: '系统统计数据', method: () => smartTileApi.getSystemStats() },
        { name: '热图数据', method: () => smartTileApi.getHeatmapData({ area: 'all' }) },
        { name: '趋势数据', method: () => smartTileApi.getTrendData({ timeRange: 'today' }) },
        { name: '对比数据', method: () => smartTileApi.getComparisonData() },
        { name: '异常数据', method: () => smartTileApi.getExceptionData({ page: 1, pageSize: 10 }) },
        { name: '健康评分', method: () => smartTileApi.getHealthScore() }
      ]

      for (const test of tests) {
        try {
          await test.method()
          this.allTestResults.push({
            name: test.name,
            success: true
          })
        } catch (error) {
          this.allTestResults.push({
            name: test.name,
            success: false,
            error: error.message
          })
        }
      }
      
      this.isTestingAll = false
    }
  }
}
</script>

<style scoped>
.api-test {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 40px;
}

.test-section {
  background: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.test-section h2 {
  color: #374151;
  margin-bottom: 16px;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 8px;
}

.controls {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

button {
  background: #3b82f6;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

button:hover:not(:disabled) {
  background: #2563eb;
  transform: translateY(-1px);
}

button:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  transform: none;
}

select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  font-size: 14px;
}

.result-box {
  margin-top: 16px;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid;
}

.result-box.success {
  background: #f0f9ff;
  border-color: #0ea5e9;
  color: #0c4a6e;
}

.result-box.error {
  background: #fef2f2;
  border-color: #ef4444;
  color: #7f1d1d;
}

.result-box h3 {
  margin: 0 0 12px 0;
  font-size: 16px;
}

.result-box pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
  font-size: 12px;
  max-height: 300px;
  overflow-y: auto;
}

.note {
  font-style: italic;
  margin-top: 8px;
  opacity: 0.8;
}

details {
  margin-top: 8px;
}

summary {
  cursor: pointer;
  font-weight: 500;
  color: #374151;
}

.info-section {
  background: #fffbeb;
  border: 1px solid #f59e0b;
  border-radius: 8px;
  padding: 24px;
  margin-top: 32px;
}

.info-section h2 {
  color: #92400e;
  margin-bottom: 16px;
}

.info-box p {
  margin: 8px 0;
  color: #78350f;
  line-height: 1.6;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  padding: 8px 0;
  border-bottom: 1px solid #e5e7eb;
}

li:last-child {
  border-bottom: none;
}

li.success {
  color: #059669;
}

li.error {
  color: #dc2626;
}

.error-detail {
  display: block;
  font-size: 12px;
  margin-top: 4px;
  opacity: 0.8;
}
</style>
